<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<link rel="stylesheet" href="../../../../lib/bootstrap@3.3.4/css/bootstrap.css">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
<body>
    <div id="app">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <td>编号</td>
                    <td>名称</td>
                    <td>单价</td>
                    <td>数量</td>
                    <td>总价</td>
                </tr>
            </thead>
            <tbody v-for="(item,index) in data_list" :key="item.id">
                <tr>
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <button @click="add(item.num,index)">+</button>
                        <input type="text" v-model="item.num">
                        <button @click="jian(item.num,index)">-</button>
                    </td>
                    <!-- price * num -->
                    <td>{{item.sum_item}}</td>
                </tr>
            </tbody>
        </table>
        <div>
            <!-- 总价格  sum_item的总和 -->
            <h1>总计：<span>{{sum}}</span></h1>
        </div>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                data_list: [{
                    id: '01',
                    name: '上衣',
                    price: 100,
                    num: 0,
                    sum_item: 0 //总价 price * num  初始值0
                }, {
                    id: '02',
                    name: '裤子',
                    price: 120,
                    num: 0,
                    sum_item: 0 //总价 price * num  初始值0
                }, {
                    id: '03',
                    name: '鞋子',
                    price: 20,
                    num: 0,
                    sum_item: 0 //总价 price * num  初始值0
                }]
            },
            methods: {
                add(num, index) {
                    // 获取当前的num值有两种方式：①传参数 把视图上的item.num 传进来，②this.data_list[index].num   index也可以作为参数传进来
                    this.data_list[index].num = num + 1;
                    this.data_list[index].sum_item = this.data_list[index].price * 1 * this.data_list[index]
                        .num * 1;
                },
                jian(num, index) {
                    this.data_list[index].num = num - 1;
                    this.data_list[index].sum_item = this.data_list[index].price * 1 * this.data_list[index]
                        .num * 1;
                }
            },
            computed: {
                sum() {
                    let result = 0;
                    this.data_list.forEach(element => {
                        result += element.sum_item;
                    });
                    return result;
                }
            }
        })
    </script>
</body>
</html>